<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hotpot-搜索</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            border-bottom: 1px solid #ddd;
            display: flex;
        }

        .header a {
            padding: 3px 10px;
            font-size: 12px;
            line-height: 24px;
            color: #555;
        }
        .header a:hover {
            color: #4285f4;
            text-decoration: #4285f4;
        }

        .header .placeholder{
            flex-grow: 1;
        }
        .header .publish {
            margin-right: 20px;
        }
        ul, ul li {
            list-style: none;
        }

        a{
            text-decoration: none;
        }
        .search-box {
            text-align: center;
            height: 480px;
        }

        .search-box .logo-box {
            font-size: 64px;
            font-family: 微软雅黑;
            color: #e10601;
            font-weight: bold;
        }

        .search-box .logo-box .logo{
            margin-top: 160px;
        }

        .search-box .logo-box .logo .letter-o{
            color: #38f;
        }
        .search-box .logo-box .logo .letter-h,
        .search-box .logo-box .logo .letter-t{
            color: #e10601;
        }
        .search-box .logo-box .logo .letter-p,
        .search-box .logo-box .logo .letter-t1{
            color: #fbbc05;
        }
        .search-box form {
            padding: 20px 0;
            font-size: 0;
        }

        .search-box form .wd-wrapper .wd{
            width: 480px;
            height: 40px;
            padding: 9px 7px;
            box-sizing: border-box;
            font: 14px arial;
            border: 1px solid #b8b8b8;
            border-bottom: 1px solid #ccc;
            border-right: 0;
            vertical-align: top;
            outline: none;
            box-shadow: none;
        }

        .search-box form .wd-wrapper .wd:hover{
            border-top: 1px solid rgb(234, 67, 53);
            border-bottom: 1px solid rgb(234, 67, 53);
            border-left: 1px solid rgb(234, 67, 53);
        }

        .search-box form .btn-wrapper .btn{
            border: 0;
            cursor: pointer;
            width: 100px;
            height: 40px;
            line-height: 38px;
            /*background-color: #38f;*/
            background-color: rgb(234, 67, 53);
            font-size: 14px;
            color: white;
            box-shadow: none;
            font-weight: normal;
        }

        .search-box form .btn-wrapper .btn:hover{
            /*background-color: #317ef3;*/
            background-color: #e10601;
            box-shadow: 1px 1px 1px #ccc;
        }

        .most-visited {
            /*border: 1px solid red;*/
            margin: 0 auto;
            padding-top: 10px;
            width: 640px;
            overflow: hidden;
        }

        .most-visited .most-wrapper ul li {
            float: left;
            width: 128px;
            height: 128px;
            font-size: 12px;
        }

        .most-visited .most-wrapper ul li:hover{
            background-color: #eee;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<header th:replace="~{fragments/header :: header}"></header>
<div class="search-box">
    <div class="logo-box">
        <p class="logo"><span class="letter-h">H</span><span class="letter-o">o</span><span class="letter-t">t</span><span class="letter-p">p</span><span class="letter-o">o</span><span class="letter-t1">t</span></p>
    </div>
    <form action="/s">
        <span class="wd-wrapper">
            <input type="text" name="wd" class="wd"/>
        </span>
        <span class="btn-wrapper">
            <input type="submit" value="go" class="btn"/>
        </span>
    </form>

    <div class="most-visited">
        <div class="most-wrapper">
            <ul>
<!--                <li><a href="https://www.baidu.com" title="百度一下，你就知道">-->
<!--                    <div class="icon-wrapper">-->
<!--                        <img src="#">-->
<!--                    </div>-->
<!--                    <div class="title-wrapper">-->
<!--                        <span>百度一下，你就知道</span>-->
<!--                    </div>-->
<!--                </a></li>-->
<!--                <li>tencent</li>-->
<!--                <li>baidu</li>-->
<!--                <li>baidu</li>-->
<!--                <li>baidu</li>-->
<!--                <li>baidu</li>-->
<!--                <li>baidu</li>-->
<!--                <li>baidu</li>-->
<!--                <li>baidu</li>-->
<!--                <li>baidu</li>-->
            </ul>
        </div>
    </div>
</div>
</body>
</html>
<script>
    most_visited=[{url:"wwww.baidu.com", icon: "mit"}, {url:"wwww.qq.com", icon: "2"}]
    localStorage.setItem("most-visited", JSON.stringify(most_visited))

    most_visited = JSON.parse(localStorage.getItem("most-visited"))
    // todo 实现经常访问网站记录
</script>